import React from 'react';
import { observer } from 'mobx-react';
import { Spin, Table, Row, Col } from 'antd';
import {LogListStore} from "../../stores/list/LogListStore";
import { WeaDialog, WeaRightMenu, WeaFormItem, WeaLocaleProvider } from "ecCom";
import { WeaSwitch } from "comsMobx";
const getLabel = WeaLocaleProvider.getLabel;

export interface LogListProps {
    LogListStore: LogListStore;
}


@observer
export default class LogDetail extends React.Component<LogListProps, any> {

    handleRightMenuClick = (key) => {
        const { LogListStore } = this.props;
        if (key == "1") {
            LogListStore.onCancel();
        }
        if (key == "0") {
            LogListStore.doDetailSearch();
        }
    }

    render() {
        const { LogListStore } = this.props;
        const { dialog, logDetailTableData, detailTable } = LogListStore;
        const rightMenus = [{
            icon: <i className='icon-coms-search' />,
            content:  getLabel(197,"搜索"),
            key: 0
        }, {
            icon: <i className='icon-coms-go-back' />,
            content: getLabel(309,"关闭"),
            key: 1
        }];
        const columns = [{
            title: getLabel(99,"操作者"),
            dataIndex: 'operateuserid',
            key: 'operateuserid',
            width: 200
        }, {
            title: getLabel(63,"类型"),
            dataIndex: 'operatedesc',
            key: 'operatedesc',
            width: 200
        }, {
            title: getLabel(82281,"日期时间"),
            dataIndex: 'operatedatetime',
            key: 'operatedatetime',
            width: 200
        }, {
            title: getLabel(19113,'值'),
            dataIndex: 'fieldvalue',
            key: 'fieldvalue',
            width: 200,
            render: (_, record) => (
                <div dangerouslySetInnerHTML={{ __html: record.fieldvalue }} />
            )
        }];
        return (
            <WeaRightMenu
                datas={rightMenus}
                onClick={this.handleRightMenuClick}
                collectParams={{
                    "favname": getLabel(82274,"字段日志")+"-" + LogListStore.dialog.title,
                    "link": '/' + window.location.toString().split('/').slice(3).join('/'),
                    "favouritetype": 5,
                    "importantlevel": 1
                }}
            >
                <div className="cube-list-batch-edit">
                    <Spin spinning={dialog.loading} tip={dialog.loadingTips} >
                        <Row style={{ padding: "10px 0px 10px 30px" }}>
                            {this.getSearchItems()}
                        </Row>
                        <Table
                            columns={columns}
                            dataSource={logDetailTableData.logDataDetail.slice()}
                            className="cube-log-list-table"
                            pagination={{
                                current: detailTable.current,
                                pageSizeOptions: ['10', '20', '30', '40', '50', '100'],
                                total: logDetailTableData.detailTotal,
                                defaultPageSize: detailTable.pagesize,
                                showSizeChanger: true,
                                showQuickJumper: true,
                                showTotal: (total) => {
                                    return ` ${getLabel(18609,"共")+total+' '+getLabel(18256,"条")} `;
                                },
                                onShowSizeChange: (current, pageSize) => { LogListStore.changeDetailPageSize(current, pageSize) }
                            }}
                            onChange={LogListStore.nextDetailDatas}
                            scroll={{ y: 405 }}
                        />
                    </Spin>
                </div>
            </WeaRightMenu>
        )
    }
    getSearchItems = () => {
        const { LogListStore } = this.props;
        const { detailCondition, detailFrom } = LogListStore;
        const { isFormInit } = detailFrom;
        let groups: any[] = [];
        isFormInit && detailCondition.map(c => {
            c.items.map((fields) => {
                groups.push(
                    <Col span={fields.rowColSpan}>
                        <WeaFormItem
                            label={`${fields.label}`}
                            labelCol={{ span: `${fields.labelcol}` }}
                            wrapperCol={{ span: `${fields.fieldcol}` }}>
                            <WeaSwitch fieldConfig={fields} form={detailFrom} />
                        </WeaFormItem>
                    </Col>
                );
            })
        });
        return groups;
    }
}


@observer
export class LogDetailDialog extends React.Component<LogListProps, any> {
    render() {
        const { LogListStore } = this.props;
        const {iconInfo} = LogListStore;
        return (
            <WeaDialog
                onCancel={LogListStore.onCancel}
                title={getLabel(82274,"字段日志")+"-" + LogListStore.dialog.title}
                visible={LogListStore.visible}
                iconBgcolor={iconInfo.iconBg || "#96358a"}
                icon={iconInfo.icon ||'icon-coms-ModelingEngine'}
                iconFontColor={iconInfo.iconColor || "#fff"}
                style={{ width: 800, height: 560 }}
                hasScroll
            >
                {LogListStore.visible && <LogDetail LogListStore={LogListStore} />}
            </WeaDialog>
        )
    }
}
